<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css 绘制特殊图形 </title>
	<style type="text/css">

          .dengyao{
          	margin:50px;
          	width: 0px;
          	height: 0px;
          	background-color: transparent;
          	border: 70px solid;
          	border-left-color: transparent;
          	border-bottom-color: green;
          	border-right-color: transparent;
          	border-top-color: transparent;
          }

           .zhijiao{

            margin:40px;
          	width: 0px;
          	height: 0px;
          	background-color: transparent;
          	border: 70px solid;
          	border-left-color: yellow;
          	border-bottom-color: green;
          	border-right-color:red;
          	border-top-color: teal;
          	border-bottom: 0;
          	border-right: 0;
          	border-top-color: transparent;
          
          }

           .tixing{

            margin:40px;
          	width: 300px;
          	height: 0px;
          	background-color: transparent;
          	border: 100px solid;
          	border-left-color: transparent;
          	border-bottom-color: green;
          	border-right-color:transparent;
          	border-top-color: transparent;
          
          }

          .yuan{
          	width: 100px;
          	height: 100px;
          	margin:50px;
          	background-color: yellow;
          	border-radius: 50%;
          }

          .tuoyuan{
          	width: 150px;
          	height: 100px;
          	margin:50px;
          	background-color: yellow;
          	border-radius: 50%;
          }



	</style>
</head>
<body>

<div class="dengyao">
	
</div>

<hr/>

<div class="zhijiao">
	
</div>

<hr/>


<div class="tixing">
	
</div>

<hr/>

<div class="yuan">
	
</div>

<he/>

<div class="tuoyuan">
	
</div>

<div>
	clear:both;//清除浮动
</div>


	
</body>
</html>